import Head from "next/head";
import { useRouter } from "next/router";
import { Button, Row, Col } from "antd";
import MainLayout from "../components/layout";
import ReactEcharts from "echarts-for-react";
import echarts from 'echarts/lib/echarts';
import styles from "../styles/Home.module.css";

export default function Home() {
  const router = useRouter();

  const getOption = () => {
    const option = {
      title: {
        text: '未来一周气温变化',
        subtext: '纯属虚构'
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['最高气温', '最低气温']
      },
      toolbox: {
        show: true,
        feature: {
          dataZoom: {
            yAxisIndex: 'none'
          },
          dataView: { readOnly: false },
          magicType: { type: ['line', 'bar'] },
          restore: {},
          saveAsImage: {}
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          formatter: '{value} °C'
        }
      },
      series: [
        {
          name: '最高气温',
          type: 'line',
          data: [11, 11, 15, 13, 12, 13, 10],
          markPoint: {
            data: [
              { type: 'max', name: '最大值' },
              { type: 'min', name: '最小值' }
            ]
          },
          markLine: {
            data: [
              { type: 'average', name: '平均值' }
            ]
          }
        },
        {
          name: '最低气温',
          type: 'line',
          data: [1, -2, 2, 5, 3, 2, 0],
          markPoint: {
            data: [
              { name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }
            ]
          },
          markLine: {
            data: [
              { type: 'average', name: '平均值' },
              [{
                symbol: 'none',
                x: '90%',
                yAxis: 'max'
              }, {
                symbol: 'circle',
                label: {
                  normal: {
                    position: 'start',
                    formatter: '最大值'
                  }
                },
                type: 'max',
                name: '最高点'
              }]
            ]
          }
        }
      ]
    };
    return option;
  };

  const getOption2 = () => {
    let option = {
      title: {
        text: '网站访问统计'
      },
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        data: [
          '周一',
          '周二',
          '周三',
          '周四',
          '周五',
          '周六',
          '周日'
        ]
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '订单量',
          type: 'bar',
          data: [
            1000,
            2000,
            1500,
            3000,
            2000,
            1200,
            800
          ]
        }
      ]
    }
    return option;
  };
  const mytextStyle={
    color:"#333",                //文字颜色
    fontStyle:"normal",         //italic斜体  oblique倾斜
    fontWeight:"normal",        //文字粗细bold   bolder   lighter  100 | 200 | 300 | 400...
    // fontFamily:"sans-serif",   //字体系列
    fontSize:12,                //字体大小
};
  const getOption3 = () => {
    return {
      title: {
        text: ''
      },
      //点击提示标签
      // tooltip: {},
      legend: {
        //图例文字展示
        data: [
          { name: '今日更新投诉量' },
          { name: '昨日更新投诉量' }],
        //图例显示在底部
        bottom: 0,
        //图例背景颜色
        backgroundColor: "transparent",
        // 图例标记的图形宽度。[ default: 25 ]
        itemWidth: 12,
        // 图例标记的图形高度。[ default: 14 ]
        itemHeight: 9,
        //图例文字样式设置
        textStyle: mytextStyle
      },
      radar: {
        //雷达图绘制类型，支持 'polygon' 和 'circle' [ default: 'polygon' ]
        shape: 'polygon',
        splitNumber: 3,
        center: ['50%', '50%'],
        radius: '65%',
        //指示器名称和指示器轴的距离。[ default: 15 ]
        nameGap: 5,
        triggerEvent: true,
        name: {
          textStyle: {
            color: '#999',
            backgroundColor: 'transparent'
            // borderRadius: 3,
            // padding: [3, 5]
          },
          formatter: function (value, indicator) {
            value = value.replace(/\S{4}/g, function (match) {
              return match + '\n'
            })
            // value = value + '\n' + indicator.value;
            return '{a|' + value + '}' + '\n' + '{b|' + indicator.value + '}'
          },
          //富文本编辑 修改文字展示样式
          rich: {
            a: {
              color: "#999",
              fontSize: 12,
              align: "center"

            },
            b: {
              color: "#333",
              fontSize: 17,
              align: "center"
            }
          }
        },
        // 设置雷达图中间射线的颜色
        axisLine: {
          lineStyle: {
            color: '#ddd',
          },
        },
        indicator: [
          { "name": "车辆已售", "value": 380, "max": 500 },
          { "name": "商家冒充个人", "value": 290, "max": 500 },
          { "name": "商家服务态度差", "value": 450, "max": 500 },
          { "name": "电话无法接通", "value": 300, "max": 500 },
          { "name": "走私套牌抵押车", "value": 480, "max": 500 },
          { "name": "价格高于标价", "value": 200, "max": 500 },
          { "name": "卖新车", "value": 350, "max": 500 },
          { "name": "图片与车款不符合", "value": 333, "max": 500 }
        ],
        //雷达图背景的颜色，在这儿随便设置了一个颜色，完全不透明度为0，就实现了透明背景
        splitArea: {
          show: false,
          areaStyle: {
            color: 'rgba(255,0,0,0)', // 图表背景的颜色
          },
        }
      },
      series: [{
        name: '投诉统计',
        type: 'radar',
        //显示雷达图选中背景
        areaStyle: { normal: {} },
        data: [
          {
            value: [380, 290, 450, 300, 480, 200, 350, 333],
            // 设置区域边框和区域的颜色
            itemStyle: {
              normal: {
                //雷达图背景渐变设置
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0.5,
                  color: 'rgba(48,107, 231, 1)'
                },
                {
                  offset: 1,
                  color: 'rgba(73,168, 255, 0.7)'
                }]),
                //去除刻度
                opacity: 0,
                //雷达图边线样式
                lineStyle: {
                  width: 0,
                  color: '#306BE7',
                },
              },
            },
            name: '今日更新投诉量',
            id: "jintian"
          },
          {
            value: [10, 250, 100, 370, 80, 500, 190, 400],
            // 设置区域边框和区域的颜色
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0.5,
                  color: 'rgba(139,241, 134, 0.7)'
                },
                {
                  offset: 1,
                  color: 'rgba(0,208, 131, 1)'
                }]),
                opacity: 0,
                lineStyle: {
                  width: 0,
                  color: '#8BF186',
                },
              },
            },
            name: '昨日更新投诉量',
            id: "zuotian"
          }
        ]
      }]
    };
  };
  return (
    <MainLayout>
      <Row gutter={24}>
        <Col span={8}>
          <ReactEcharts
            option={getOption()} />
        </Col>
        <Col span={8}>
          <ReactEcharts
            option={getOption2()} />
        </Col>
        <Col span={8}>
          <ReactEcharts
            option={getOption3()} />
        </Col>
      </Row>
    </MainLayout>
  );
}
